import React, { Component } from 'react';
import axios from 'axios'
class Index extends Component {
  state = {
    url: '',
    urls: []
  }
  // componentDidMount() {
  //   axios.get('https://dog.ceo/api/breeds/image/random/3').then(resp => {
  //     this.setState({
  //       urls: resp.data.message
  //     })
  //   })

  //   axios.get('https://dog.ceo/api/breeds/image/random').then(resp => {
  //     this.setState({
  //       url: resp.data.message
  //     })
  //   })
  // }
  render() {
    const { type, title, url, urls, news, datetime } = this.props
    const { url: dogUrl, urls: dogUrls  } = this.state
    return (
      <div>
        {
          type === '无图' && (
            <dl className="no-image">
              <dd>
                <h3>{title}</h3>
                <small style={{ color: '#ccc' }}>
                  <b>{news}</b>
                  <b>{datetime}</b>
                </small>
              </dd>
            </dl>
          )
        }

        {
          type === '三图' && (
            <dl className="three-image">
              <dd>
                <h3>{title}</h3>
                <small style={{ color: '#ccc' }}>
                  <b>{news}</b>
                  <b>{datetime}</b>
                </small>
              </dd>
              <dt>
                {
                  urls.length > 0 && urls.map((v, i) => {
                    return <img src={v} key={i} alt="" />
                  })
                }
              </dt>
            </dl>
          )
        }


        {
          type === '单图' && (
            <dl className="one-image">
              <dt>
                <img src={url} alt="" />
              </dt>
              <dd>
                <h3>{title}</h3>
                <small style={{ color: '#ccc' }}>
                  <b>{news}</b>
                  <b>{datetime}</b>
                </small>
              </dd>
            </dl>
          )
        }
      </div>
    );
  }
}

export default Index;
